<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
		<style type="text/css">
			.main{
				width: 500px;
				height: 500px;
				border: 1px solid black;
				background: orange;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<p>段落1</p>
			<p>段落2</p>
			<p>段落3</p>
			<p class="pul">显示
				<ul class="ul">
					<li>NO.1</li>
					<li><span>NO.2</span></li>
					<li>NO.3</li>
					<li>NO.4</li>
					<li>NO.5</li>
					<li>NO.6</li>
					<li>NO.7</li>
					<li>NO.8</li>
					<li id="li9">NO.9</li>
				</ul>
			</p>
			<p class="f">返回</p>
		</div>
		<script type="text/javascript">
			//添加
			$("#main").addClass("main")
			//第一个
			$("#main").children(":first").css("background","red")
			//上一个元素
			$(".pul").prev().css("background","green")
			$(".pul").prev().prev().css("font-size","20px")
			//后代选择器
			$(".ul li:first").css("background","pink")
			//等于
			$(".ul li:eq(1)").css("background","royalblue")
			////隔行变色
			//奇数
			$(".ul li:odd").css("background","aqua")
			//偶数
			$(".ul li:even").css("background","coral")
			//获取文本和标签
			$(".ul li:eq(1)").html()
			//获取文本
			$(".ul li:eq(1)").text()
			//将js的dom对象转换成jquery对象
			//js:innerHtml
			//jQuery：Html
			var li9js=document.getElementById("li9")
			//alert(li9js.innerHTML)
			var li9jq=$("#li9")
			//alert(li9jq.html())
			//将js的dom对象转换成jquery对象
			var jq=$(li9js)
			//alert(jq.html())
			var jsq=jq[0]
			//alert(jsq.innerHTML)
			var jsq1=jq.get(0)
			//alert(jsq1.innerHTML)
			/*//隐藏显示
			$(".ul").hide();
			$(".pul").click(function(){
				$(".ul").show();
			})
			$(".f").click(function(){
				$(".ul").hide()
			})*/
		</script>
	</body>

</html>